<template>
	<view>
		<view class="select-ground" @click="openPicker">
			<view class="item-left">选择代理</view>
			<view class="item-right">
				<view>{{selectGround}}</view>
				<image src="../../static/images/user/group3.png" class="image"></image>
			</view>
		</view>
		<view class="month-box">
			<view class="table-item">
				<view class="box-item">月份</view>
				<view class="box-item">订单数量</view>
				<view class="box-item">订单总额</view>
			</view>
			<view class="box-tabel" v-if="dataList.length>0">
				<view class="table-item" v-for="(item,index) in dataList" :key="index">
					<view class="box-item">{{item.month}}</view>
					<view class="box-item">{{item.order_count}}</view>
					<view class="box-item">{{item.total_amount}}</view>
				</view>
			</view>
			<view class="empty-box" v-else>
				<image src="../../static/images/nodata.png" class="image"></image>
				<view>暂无记录～</view>
			</view>
		</view>
		<uv-picker ref="picker" :columns="columns" keyName="name" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	import api from '@/api/index2.js';
	export default {
		data() {
			return {
				dataList: [],
				params: {
					agent_id: ''
				},
				selectGround: '',
				columns: []
			}
		},
		onLoad() {
			this.getAreaList()
			this.monthlyOrder()
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.params.agent_id = e.value[0].id
				this.selectGround = e.value[0].name
				this.monthlyOrder()
			},
			getAreaList() {
				api.getAgentList().then(res => {
					let columns = [{
						name: "全部",
						id: ""
					}]
					this.columns = [columns.concat(res.data.map(item => {
						return {
							...item,
							name: item.nickname + '-' + item.mobile
						}
					}))];
				});
			},
			monthlyOrder() {
				api.monthlyOrder(this.params).then(res => {
					this.dataList = res.data
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		text-align: center;
		margin-top: 80px;
		color: #adadad;

		.image {
			width: 200px;
			height: 200px;
			margin-bottom: 20px;
		}
	}

	.select-ground {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;

		.item-right {
			display: flex;
			align-items: center;
		}

		.image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.month-box {
		margin: 20rpx 0 0;
		padding: 20rpx;
		background-color: #ffffff;

		.table-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px solid #f8f8f8;

			.box-item {
				flex: 1;
				text-align: center;
			}
		}
	}
</style>